<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刘澳琳的exam5</title>
		<link rel="stylesheet" type="text/css" href="css/tabdemo.css"/>
		<script src="./js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<div class="tabox">
		      <div class="hd">
		        <ul>
		          <li class="on">疯狂抢购</li>
		          <li class=" ">猜您喜欢</li>
		          <li class=" ">热卖商品</li>
		          <li class=" ">热评商品</li>
		          <li class=" ">新品上架</li></ul>
		      </div>
		      <div class="bd">
		        <ul class="lh">
		          <img src="img/p1.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p2.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p3.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p4.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p5.jpg" >
		        </ul>
		      </div>
		    </div>

			<script>
				//199000932刘澳琳
				for(let i=1;i<=	$('li').length;i++)
				{
					$("li").eq(i-1).click(function(){//给所有的li标签加上点击事件
					$("li").removeClass("on");//一旦点击，先让所有的标签状态on给移除
					$("li").eq(i-1).addClass("on");//然后把被点击的标签给置为on
					$(".bd ul").css("display","none");//将类bd下所有的ul标签隐藏
					$(".bd ul").eq(i-1).css("display","block");//将其被点击的那个ul标签内容显示
					})//简单
				}
			</script>

	</body>
	



</html>
